<template>
  <div class="relative w-full h-full">
    <PageHeader :title="t('table_setting.门店桌位点餐设置')" />
    <div class="mt12 toolbar flex_aic" v-my-point="'tenantTable:add'">
      <div class="addBtn flex_aic_jcc" @click="handleAddTable()">
        <SvgIcon name="iconxinzeng" color="rgb(255, 89, 8)" class="mr8" />
        <span>{{ t('table_setting.添加桌位') }}</span>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 180px)"
      row-key="id"
      border
      v-loading="loading"
    >
      <el-table-column :label="t('table_setting.序号')" type="index" width="120" />
      <el-table-column :label="t('table_setting.桌位号')" prop="code" />
      <el-table-column :label="t('table_setting.排序')" prop="sort" />
      <el-table-column :label="t('table_setting.操作')" width="300">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button type="text" @click="showCodeDiaFn(scope.row)"
              >{{ t('table_setting.下载二维码') }}</el-button
            >
            <el-button type="text" @click="handleEdit(scope.row)" v-my-point="'tenantTable:edit'"
              >{{ t('table_setting.编辑') }}</el-button
            >
            <el-popconfirm
              :title="t('table_setting.确定删除吗')"
              @confirm="handleDelete(scope.row)"
              width="300px"
            >
              <template #reference>
                <el-button type="text" size="small" v-my-point="'tenantTable:del'">{{ t('table_setting.删除') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex_aic_jcc mt10 w-full">
      <el-pagination
        v-model="currentPage"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia v-model:show="showEditDia" :data="editData" @refresh="refresh" />
    <ShowCodeDia v-model:show="showCodeDia" :data="showCodeRow" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useTableMixin } from "@/utils/tableMixin";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import EditDia from "./editDia.vue";
import { ElMessage } from "element-plus";
import ShowCodeDia from "./showCodeDia.vue";

const { t, locale } = useI18n();
const showEditDia = ref(false);
const editData = ref({});
const showCodeDia = ref(false)
const showCodeRow = ref({});

const fetchMessages = (params) => {
  // 添加语言参数
  return Api.tenantTable({
    ...params,
  });
};

const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSizeChange,
  handleCurrentChange,
  handleSearch,
  handleReset,
} = useTableMixin(fetchMessages);

const handleAddTable = () => {
  showEditDia.value = true;
  editData.value = {};
};

const handleEdit = (row) => {
  editData.value = row;
  showEditDia.value = true;
};

const showCodeDiaFn = (row) => {
  showCodeDia.value = true;
  showCodeRow.value = row;
};

const handleDelete = (row) => {
  Api.deleteTenantTable([row.id]).then((res) => {
    if (res.status == 200) {
      ElMessage.success(t('table_setting.删除成功'));
      getDataList();
    }
  });
};

const refresh = () => {
  currentPage.value = 1;
  getDataList();
};
</script>
<style lang="scss" scoped></style>
